import React, {useCallback, useMemo, useState} from 'react';
import Child from './components/Child'

function App(props) {
    const [num,setNum] = useState(1)
    const [arr,setArr] = useState([
        {
            id:1,
            thing:"买早点",
            money:-10
        },
        {
            id:2,
            thing:"扶老太太过马路",
            money:100
        },
        {
            id:3,
            thing:"去工地搬砖",
            money:10
        }
    ]);
    //引入useMemo钩子函数，第一个参数省略则无效
    //只有一个[]，则会产生记忆
    //[arr],当arr发生变化时会调用函数
    const count = useMemo(function(){
        console.log(11111);
        let n = 0;
        arr.forEach(v=>{
            n+=v.money;
        })
        return n;
    },[arr])
    return (
        <div>
            <button onClick={()=>{
                setNum(200);
            }}>{num}</button>
            <button onClick={()=>{
                setArr([
                    {
                        id:Date.now(),
                        thing:"请咱们吃大餐",
                        money:21000
                    },
                    ...arr
                ])
            }}>点我</button>
            <h3>班长的一天</h3>
            <h3>合计：￥{count.toFixed(2)}</h3>
            {
                arr.map(item=>(
                    <p key={item.id}>{item.thing}:￥{item.money.toFixed(2)}</p>
                ))
            }
            <h3>合计：￥{count.toFixed(2)}</h3>
            <Child/>
        </div>

    );
}

export default App;